<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增试题')" />
</head>
<style>
	.qu-content div{
    	line-height: 30px;
  	}
  	.el-checkbox-group label,.el-radio-group label{
    	width: 100%;
  	}
  	.card-title{
	    background: #eee;
	    line-height: 35px;
	    text-align: center;
	    font-size: 14px;
  	}
	.card-line{
		padding-left: 10px
	}
	.card-line span {
		cursor: pointer;
		margin: 2px;
	}
	.el-radio, .el-checkbox{
    	padding: 9px 20px 9px 10px;
    	border-radius: 4px;
   	 	border: 1px solid #dcdfe6;
    	margin-bottom: 10px;
  	}
  	.is-checked{
    	border: #409eff 1px solid;
  	}
  	.el-radio img, .el-checkbox img{
	    max-width: 200px;
	    max-height: 200px;
	    border: #dcdfe6 1px dotted;
  	}
  	.el-checkbox__inner {
    	display: none;
  	}
  	.el-radio__inner{
    	display: none;
  	}
  	.el-checkbox__label{
    	line-height: 30px;
  	}
  	.el-radio__label{
    	line-height: 30px;
  	}
</style>
<body class="white-bg">
    <div id="app"  class="wrapper wrapper-content animated fadeInRight ibox-content ">
    	<el-row :gutter="24">
    		<el-col :span="24">
        		<el-card style="margin-bottom: 10px">
         		 	距离考试结束还有：
         		 	<span style="color: #ff0000;">
         		 		{{ min }}分钟{{ sec }}秒
         		 	</span>
		        	<el-button style="float: right; margin-top: -10px" type="primary" icon="el-icon-plus" :loading="loading" @click="handHandExam()">
		            	{{ handleText }}
		    		</el-button>
        		</el-card>
      		</el-col>
      		<el-col :span="6" :xs="24" style="margin-bottom: 10px">
      			<el-card>
      				<p class="card-title">答题卡</p>
      				<el-row :gutter="24" class="card-line" style="padding-left: 10px">
			            <el-tag type="info">未作答</el-tag>
			            <el-tag type="success">已作答</el-tag>
		          	</el-row>
		          	<div v-if="paperData.radioList!==undefined && paperData.radioList.length > 0">
		            	<p class="card-title">单选题</p>
			            <el-row :gutter="24" class="card-line">
			            	<el-tag v-for="item in paperData.radioList" :key="item.quId" :type="cardItemClass(item.answered, item.quId)" @click="handJump(item)"> {{ item.sort+1 }}</el-tag>
			            </el-row>
		          	</div>
		          	<div v-if="paperData.multiList!==undefined && paperData.multiList.length > 0">
			            <p class="card-title">多选题</p>
			            <el-row :gutter="24" class="card-line">
			            	<el-tag v-for="item in paperData.multiList" :key="item.quId" :type="cardItemClass(item.answered, item.quId)" @click="handJump(item)">{{ item.sort+1 }}</el-tag>
			            </el-row>
		          	</div>
		          	<div v-if="paperData.judgeList!==undefined && paperData.judgeList.length > 0">
			            <p class="card-title">判断题</p>
			            <el-row :gutter="24" class="card-line">
			              <el-tag v-for="item in paperData.judgeList" :key="item.quId" :type="cardItemClass(item.answered, item.quId)" @click="handJump(item)">{{ item.sort+1 }}</el-tag>
			            </el-row>
		          	</div>
      			</el-card>
      		</el-col>
      		<el-col :span="18" :xs="24">
      			<el-card class="qu-content">
          			<p v-if="quData.content">{{ quData.sort + 1 }}.{{ quData.content }}</p>
          			<div v-if="quData.quType === '1' || quData.quType==='3'">
            			<el-radio-group v-model="radioValue">
	              			<el-radio v-for="item in quData.answerList"  :key="item.answerId" :label="item.answerId">
	              			{{ item.abc }}.{{ item.content }}
	              			</el-radio>
            			</el-radio-group>
          			</div>
          			<div v-if="quData.quType === '2'">
            			<el-checkbox-group v-model="multiValue">
              				<el-checkbox v-for="item in quData.answerList" :key="item.answerId" :label="item.answerId">
              				{{ item.abc }}.{{ item.content }}
              				</el-checkbox>
            			</el-checkbox-group>
          			</div>
        		</el-card>
       			<div style="margin-top: 20px">
          			<el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
            			上一题
         			</el-button>
          			<el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
            			下一题
          			</el-button>
        		</div>
      		</el-col>
    	</el-row>
	</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" >
    	var prefix = ctx + "exam/examOnline";
    	var model = [[${model}]];
		var vObj = new Vue({
			el: '#app',
			data(){
				return{
					paperId : '',
				  	showPrevious: false,
			      	showNext: true,
			      	loading: false,
			      	handleText: '交卷',
			      	pageLoading: false,
			     	// 当前答题卡
			        cardItem: {},
			        allItem: [],
			      	// 试卷信息
			        paperData: {
			          leftSeconds: 99999,
			          radioList: [],
			          multiList: [],
			          judgeList: [],
			        },
			     	// 当前题目内容
			        quData: {
			        	answerList: []
			        },
			     	// 单选选定值
			        radioValue: '',
			        // 多选选定值
			        multiValue: [],
			        // 已答ID
			        answeredIds: [],
			        min: '00',
			        sec: '00',
			        timeId:''
				}
			},
			methods: {
				handHandExam(){
					let that = this;
					this.fillAnswer();
					const notAnswered = that.countNotAnswered();
			        let msg = '确认要交卷吗？'
			        if (notAnswered > 0) {
			        	msg = '您还有' + notAnswered + '题未作答，确认要交卷吗?'
			        }
			        that.$confirm(msg, '提示', {
		            	confirmButtonText: '确定',
		            	cancelButtonText: '取消',
		            	type: 'warning'
			        }).then(() => {
			        	that.doHandler()
			        }).catch(() => {
			        	that.$message({
			            	type: 'info',
			            	message: '交卷已取消，您可以继续作答！'
			          	})
			        })
				},
				handSave(item, callback){
					let that = this;
					if (item.quId === this.allItem[0].quId) {
						this.showPrevious = false
					} else {
						this.showPrevious = true
					}
					// 最后一个索引
					let last = this.allItem.length - 1
					if (item.quId === this.allItem[last].quId) {
						this.showNext = false
					} else {
						this.showNext = true
					}
					this.radioValue = '';
					this.multiValue=[];
					this.quData = item;
					if(this.quData.answered){
						// 填充该题目的答案
				        this.quData.answerList.forEach((item) => {
				        	if ((that.quData.quType == '1'|| that.quData.quType == '3') && item.checked) {
				        		that.radioValue = item.answerId
				          	}
				          	if (that.quData.quType == '2' && item.checked) {
				          		that.multiValue.push(item.answerId)
				          	}
				        })
					}
				},
				handPrevious(){
					this.fillAnswer();
					let index = this.quData.sort - 1
				    this.handSave(this.allItem[index])
				},
				handNext(){
					this.fillAnswer();
				    let index = this.quData.sort + 1
			        this.handSave(this.allItem[index])
				},
				fillAnswer(){
					let that = this;
					let answers = this.multiValue;
				    if (this.radioValue !== '') {
				        answers.push(this.radioValue)
				    }
					if(answers.length > 0){
						//设置答案
						let item = this.allItem[this.quData.sort];
						item.answered = true;
						if(this.quData.quType === '1' || this.quData.quType === '3'){
							item.answerList.forEach((data, idx)=>{
								if(data.answerId == that.radioValue){
									data.checked = true;
								}
							})
						}
						if(this.quData.quType === '2' ){
							item.answerList.forEach((data, idx)=>{
								if(that.multiValue.indexOf(data.answerId) > -1){
									data.checked = true;
								}
							})
						}
						//选项卡填充颜色
						if(this.quData.quType === '1'){
							this.paperData.radioList.forEach((item, index)=>{
								if(item.quId == that.quData.quId){
									item.answered = true;
								}
							})
						}
						if(this.quData.quType === '3'){
							this.paperData.judgeList.forEach((item, index)=>{
								if(item.quId == that.quData.quId){
									item.answered = true;
								}
							})
						}
						if(this.quData.quType === '2' ){
							this.paperData.judgeList.forEach((item, index)=>{
								if(item.quId == that.quData.quId){
									item.answered = true;
								}
							})
						}
					}		
				},
				handJump(item){
					this.fillAnswer();
					let index = item.sort;
					this.quData = this.allItem[index];
					this.handSave(this.quData);
				},
				doHandler(){
					let that = this;
					var url = prefix+"/addPaper";
					var formData = this.paperData;
					formData.paperQuList = this.allItem;
					$.ajax({
						url:url,
						type:"post",
						data:{'paper':JSON.stringify(formData)},
						success:function(r){
							if(r.code == 0){
								if(r.data){
									//var rUrl = prefix+"/paperResult/"+r.data
									//$.modal.parentTab("考试结果", rUrl);
									let msg = '';
									if(r.data.passed){
										msg ="恭喜本次考试通过，考试得分："+r.data.userScore;
									}else{
										msg ="很遗憾本次考试未通过，考试得分："+r.data.userScore;
									}
								    that.$confirm(msg, '提示', {
						            	confirmButtonText: '确定',
						          		type: 'warning'
							        }).then(() => {
							        	closeItem();
							        }).catch(() => {
							        	closeItem(); 
							        });
								}
							}else{
								that.$message({
							    	type: 'info',
							        message: '提交试卷失败！'
							    })
							}
						}
					})
				},
				// 统计有多少题没答的
				countNotAnswered() {
					let notAnswered = 0
					this.paperData.radioList.forEach(function(item) {
						if (!item.answered) {
							notAnswered += 1
						}
					})
					this.paperData.multiList.forEach(function(item) {
						if (!item.answered) {
							notAnswered += 1
						}
					})
					this.paperData.judgeList.forEach(function(item) {
						if (!item.answered) {
							notAnswered += 1
						}
					})
					return notAnswered
				},
				// 倒计时
			    countdown() {
					let leftSeconds = this.paperData.leftSeconds;
					// 强制交卷
				    if (leftSeconds < 0) {
				    	this.doHandler();
				       	return
				    }
				  	// 时
				    let min = parseInt(leftSeconds / 60 % 60);
				    let sec = parseInt(leftSeconds % 60);
				    this.min = min > 9 ? min : '0' + min;	
					this.sec = sec > 9 ? sec : '0' + sec;
				    this.paperData.leftSeconds -= 1;
				},
				// 答题卡样式
			    cardItemClass(answered, quId) {
			    	if (quId === this.quData.quId) {
			        	return 'warning'
			      	}
			      	if (answered) {
			        	return 'success'
			      	}
			      	if (!answered) {
			        	return 'info'
			      	}
			    },
			},
			created(){
				let that = this;
				this.paperId = model.id;
				if(model.id){
					var url = prefix+"/selectPaperDetail";
					//查询组卷信息
					$.ajax({
						url: url,
						type: "post",
						dataType: "json",
						data: {"id":that.paperId},
						beforeSend: function () {
						},
						success: function(r) {
							if(r.code == 0){
								if(r.data){
									that.paperData= r.data;
									 // 获得第一题内容
							        if (that.paperData.radioList && that.paperData.radioList.length > 0 ) {
							        	that.quData = that.paperData.radioList[0]
							        } else if (that.paperData.multiList && that.paperData.multiList.length > 0) {
							        	that.quData = that.paperData.multiList[0]
							        } else if (that.paperData.judgeList && that.paperData.judgeList.length > 0) {
							        	that.quData = that.paperData.judgeList[0]
							        }
							        that.radioValue = ''
							        that.multiValue = []
							     	// 填充该题目的答案
							        that.quData.answerList.forEach((item) => {
							        	if ((that.quData.quType === 1 || that.quData.quType === 3) && item.checked) {
							        		that.radioValue = item.answerId
							          	}
							          	if (that.quData.quType === 2 && item.checked) {
							          		that.multiValue.push(item.answerId)
							          	}
							        })
							        //填充所有题
							        that.paperData.radioList.forEach(function(item) {
							        	that.allItem.push(item)
							        })
							        that.paperData.multiList.forEach(function(item) {
							           	that.allItem.push(item)
							        })
							        that.paperData.judgeList.forEach(function(item) {
							        	that.allItem.push(item)
							        })
							        that.countdown();
							        that.timeId = setInterval(function() {
								   		that.countdown();
								    }, 1000)
								}
							}
						}
					})
					
				}
			},
			destroyed(){
				if(this.timeId){
					clearInterval(this.timeId);
				}
			}
		})
	</script>
</body>
</html>
